Day21 - 事件(02) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 11 屆 iThome 鐵人賽

DAY 21

自我挑戰組

JavaScript 新手筆記系列第 21 篇

Day21 - 事件(02)

11th鐵人賽 javascript

hokou

2019-10-06 23:41:42

1004 瀏覽

分享至

前言

繼續進行事件篇，今日介紹氣泡與捕捉，以及中止或取消的部分

事件監聽器

DOM 事件監聽器：element.addEventListener('event' , functionName , BooLean); 的第 3 個參數
- false：由指定元素(內)往外擴散，所以稱為「事件氣泡( Event Bubbling )」，就像從 li > ul > body
- true：由最外面往內至指定元素，所以稱為「事件捕捉( Event Capturing )」，就像從 body > ul > li
參考以下例子，設定2個事件，按下按鈕時，因為參數設定不同，顯示順序會有所不同

index.html

<body id="body">
    
    <ul>
        <li><input type="button" value="按我" class="btn"></li>
        <li><a href="https://www.google.com/" class="link">點我連結到Google</a></li>
        <li></li>
    </ul>

    <script src="JS/test.js"></script>
</body>

test.js

var el1 = document.querySelector(".btn");
function click1(){
    console.log("我是內");
}

var el2 = document.querySelector("#body");
function click2(){
    console.log("我是外");
}

el1.addEventListener('click' , click1 , false);
el2.addEventListener('click' , click2 , false);

// 當2者為 false
// 氣泡，從內至外
// 顯示順序如下
// 我是內
// 我是外

el1.addEventListener('click' , click1 , true);
el2.addEventListener('click' , click2 , true);

// 當2者為 true
// 捕捉，從外至內
// 顯示順序如下
// 我是外
// 我是內

中止與取消

中止氣泡或補捉： event.stopPropagation()
- 不想要繼續執行其他層的內容

var el1 = document.querySelector(".btn");

function click1(e){
    console.log("我是內");
    e.stopPropagation();  // 中止
}
el1.addEventListener('click' , click1 , false);

var el2 = document.querySelector("#body");

function click2(){
    console.log("我是外");
}
el2.addEventListener('click' , click2 , false);

// 僅顯示指定元件，後續的並未執行
// 我是內

取消預設的行為： event.preventDefault()
- 一般常用在 link 或 submit

var el3 = document.querySelector('.link');
function link(e){
    console.log("取消預設連結動作");
    e.preventDefault();  // 取消
}
el3.addEventListener('click' , link , false);

// 點擊後顯示 取消預設連結動作
// 並未連結至 google 頁面

想把 function 的內容直接寫進去？

// function 內容寫在裡面
// 中止
var el1 = document.querySelector(".btn");

el1.addEventListener('click' , function(e){
    console.log("我是內");
    e.stopPropagation();  // 中止
} , false);


// function 內容寫在裡面
// 取消
var el3 = document.querySelector('.link');

el3.addEventListener('click' , function(e){
    console.log("取消預設連結動作");
    e.preventDefault();  // 取消
}, false);